<template>
    <div class="fields inline" :class="{disabled: data.readonly}">
        <label :class="{must: data.is_must}">{{data.label}}</label>
        <div class="field inline" v-if="data.show_type == 'select_coustom'">
            <select class="ui dropdown" :class="{disabled: data.readonly}" v-model="selected" >
                <option :value="item.value" v-for="item in element"> {{item.label}}</option>
            </select>
        </div>
        <div class="field" v-else>
            <div class="fields">
                <div class="field" v-for="item in element">
                    <div class="ui radio checkbox ">
                        <input type="radio" :value="item.value" v-model="selected" :name="data.name">
                        <label>{{item.label}}</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="field" :class="{disabled:selected!=='未选择'}">
            <label :class="{must: data.is_must}">自定义</label>
            <input type="text" name="data.name" :maxlength="maxlength" v-model="custom_value" style="width:250px">
        </div>
    </div>

</template>

<script>
    import tool from 'src/util/tool';
    import util from '_util/index';
    import logic from '_logic';

    export default {
        data() {
            return {
                element: [],
                type: "",
                selected: "",
                custom_value: ''
            }
        },
        methods: {
            setSelect(){
                $('.ui.dropdown')
                    .dropdown({
                        allowAdditions: true,
                        hideAdditions: true,
                        metadata: {
                            defaultValue: 0
                        }
                    })
                ;
            }
        },
        watch: {
            data: {
                immediate: true,
                handler(val) {
                    this.type = val.show_type;
                    if (val.element) {
                        this.element = typeof( this.element ) != "object" ? [] : val.element.map(function (item) {
                            if (typeof(item) != "object") {
                                return {value: item, label: item}
                            }
                            ;
                            return item;
                        })
                    }
                }
            },

            selected(val, old){
                if (!this.data || this.data.readonly ) {
                    return;
                }
                this.$emit("onchange", {name: this.data.name, value: val === '未选择'?'':val})
            },
            custom_value(val, old){
                if (!this.data || this.data.readonly || this.selected !== '未选择') {
                    return;
                }
				if(val.split(" ").length!=1){
					setTimeout(()=>{
						this.custom_value = val.replace(/ /g,'_')
					})
				}
                this.$emit("onchange", {name: this.data.name, value: val})
            }
        },
        computed: {
			maxlength(){
				return this.data.maxlength || ''
			}
		},
        props: {
            data: {
                type: Object,
                default(){
                    return {}
                }
            },
            value: {}
        },
        components: {},
        created() {
            this.selected = this.value || [];
            this.$nextTick(() => {
                this.setSelect();
            });
        }
    };
</script>

<style lang="less" scoped>

</style>
